<template>
  <div class="easyd-weixin-Box">
    <div class="selectPrivateTemplateBox">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
      >
        <div class="selectPrivateTemplateItem" v-for="i in 3">
          <div class="selectPrivateTemplateItemImage">
            <img src="~BUSSINESS_IMAGE/images/sixinmoban.jpg">
          </div>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allLoaded: false
    };
  },
  methods: {
    loadTop() {
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 2000);
    },
    loadBottom() {
      setTimeout(() => {
        this.allLoaded = true;
        this.$refs.loadmore.onBottomLoaded();
      }, 5000);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'
.selectPrivateTemplateBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  -webkit-overflow-scrolling : touch;
  padding-top: 15px;

  .selectPrivateTemplateItem {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin-bottom: 15px;
    $itemStyle()

    .selectPrivateTemplateItemDesc {
      width 100%
      height auto
      box-sizing: border-box;
      padding-left 10px
      padding-right 10px
      padding-bottom 10px
      border-top 1px solid #eee
      padding-top 10px
      color #666

      b {
        float left
        width 100%
        margin-bottom 5px
        color #333
      }
    }

    .selectPrivateTemplateItemImage {
      width: 100%;
      height: 210px;
      background: #eee;

      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        box-sizing: border-box;
        
      }
    }
  }
}
</style>
